<template>
	<div class="historyContainer">
		<div class="listContainer">
			<!-- 日历表 -->
			<div class="calendar"> 
				<Calendar />
			</div>
			<!-- 表格 -->
			<div class="historyList">
				<TableAlerts />
			</div>
		</div>
		<!-- 文件导入上传 -->
		<div class="filesUpload">
			<UploadFile />
		</div>
	</div>
</template>

<script>
import Calendar from './components/Calendar.vue'
import TableAlerts from './components/TableAlerts.vue'
import UploadFile from './components/UploadFile.vue'
export default {
	components: {
		Calendar, TableAlerts, UploadFile
	},
	data() {
		return {
			
		}
	}
}
</script>

<style lang="less" scoped>
	.historyContainer{
		display: flex;
		flex-direction: column;
		.listContainer{
			display: flex;
			justify-content: space-between;
			margin: 0 0 30px 0;
			align-items: center;
			.calendar{
				width: 40%;
				height: 335px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 2px 4px 4px 1px #ccc;
			}
			.historyList{
				width: 56%;
				height: 335px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 2px 4px 4px 1px #ccc;
			}
		}
		.filesUpload{
			width: 100%;
			height: 153px;
			background: #fff;
			border-radius: 8px;
			box-shadow: 2px 4px 4px 1px #ccc;
		}
		
	}
</style>